define([
  'text!' + ELMP.resource('components/advancedSelect/index.html', 'lib'),
  'css!' + ELMP.resource('components/advancedSelect/index.css', 'lib')

],
function (template, css1) {
  return {
    template,
    name: 'AdvancedSelect',
    computed: {
      style () {
        const len = this.value.length
        if (len < 3) {
          return {
            width: 33 * len + '%'
          }
        }
      }
    },
    props: {
      value: { type: Array, default: () => [] },
      border: { type: Boolean, default: true },
      column: { type: Number, default: 3 }
    },
    data () {
      return {
        visible: false,
        componentList: [],
        form: {

        }
      }
    },
    watch: {
      value: {
        handler () {
          this.handleValue()
        },
        immediate: true
      }
    },
    mounted () {
      $.el.util.writeCss(ELMP.resource('components/advancedSelect/index.css', 'lib'))
      document.querySelector('#wrap-all').addEventListener('click', this.elpopoverClick, false)
    },
    beforeDestroy () {
      document.querySelector('#wrap-all').removeEventListener('click', this.elpopoverClick, false)
    },
    methods: {
      elpopoverClick (e) {
        this.visible = false
      },
      handleValue () {
        this.initForm()
        this.componentList = this.value.map(component => {
          if (component.name === 'ElSelect') {
            component.options = component.options || []
            component.optionProps = {
              label: component.optionProps?.label || 'label',
              value: component.optionProps?.value || 'value'
            }
          }
          return component
        })
      },
      save () {
        this.visible = false
        this.$emit('save', this.form)
      },
      initForm () {
        this.form = this.value.reduce((result, current) => {
          $._.set(result, current.field, current.defaultValue)
          return result
        }, {})
      },
      clear () {
        this.initForm()
        this.$emit('save', this.form)
      }
    }
  }
})
